// imr
import React from 'react'
import './index.css'

export default class App extends React.Component {
  state = {
    list: [
      { id: 1, username: '王思聪', content: '想你的夜' },
      { id: 2, username: '王思聪2', content: '想你的夜2' },
      { id: 3, username: '王思聪3', content: '想你的夜3' },
    ],
  }

  //  2. 清空评论的功能
  handleClear = () => {
    // this.state.list = []
    this.setState({ list: [] })
  }

  handleAdd = ({ username, content }) => {
    // console.log('子组件提交表单的时候回传的数据', { username, content })
    this.setState({ list: [{ id: Date.now(), username, content }, ...this.state.list] })
  }

  // 4. 删除评论功能
  // 🔔 React 重要思想：单向数据流，this.state 只负责访问，更新需要用 this.setState()
  handleDel = (id) => {
    // console.log(id)
    // 💥 没有通过 setState的方式直接修改了 state 的数组是不推荐的(会有一些坑)
    // this.state.list.splice()
    // ✅ 基于原数组处理成功一份新的数据，再通过 setState 更新
    // const newList = this.state.list.filter((item) => item.id !== id)
    // console.log(this.state.list)
    // console.log(newList)
    this.setState({ list: this.state.list.filter((item) => item.id !== id) })
  }

  render() {
    return (
      <div className='app'>
        {/* 🔔🔔：React 给子组件传递函数，相当于Vue的自定义事件 */}
        {/* 组件1：表单结构 */}
        <MyForm list={this.state.list} handleClear={this.handleClear} handleAdd={this.handleAdd} />
        {/* 组件2：评论列表 */}
        <MyList list={this.state.list} handleDel={this.handleDel} />
      </div>
    )
  }
}

class MyForm extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
  }

  // 3. 发表新的评论功能
  handlePublish = (e) => {
    // 💥 阻止表单刷新页面的默认行为
    e.preventDefault()
    // 获取输入框 和 文本域的值
    const { username, content } = this.state
    // 非空判断
    if (username.trim() === '' || content.trim() === '') return alert('用户名或发布内部不能为空')
    // console.log({ username, content })
    // 🔔🔔 Vue 和 React 子传父写法区别
    // Vue：   this.$emit('自定义事件', 回传的数据)
    // Ract：  this.props.自定义事件(回传的数据)
    this.props.handleAdd({ username, content })

    // 基于旧数组拼接成新数组，setState 实现 state更新 和 UI更新
    this.setState({
      // list: [{ id: Date.now(), username, content }, ...this.state.list],
      username: '',
      content: '',
    })
    // this.setState({ username: '', content: '' })
  }

  // 表单-受控组件 state 更新
  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  render() {
    return (
      <form onSubmit={this.handlePublish}>
        <input
          value={this.state.username}
          name='username'
          onChange={this.handleChange}
          className='user'
          type='text'
          placeholder='请输入评论人'
        />
        <br />
        <textarea
          value={this.state.content}
          name='content'
          onChange={this.handleChange}
          className='content'
          cols='30'
          rows='10'
          placeholder='请输入评论内容'
        />
        <br />
        <button>发表评论</button>
        {/* 💥 清空评论按钮需要改造为普通按钮 type="button"，因为form结构包裹的 button 默认type为submit */}
        <button type='button' onClick={this.props.handleClear}>
          清空评论
        </button>
      </form>
    )
  }
}

class MyList extends React.Component {
  render() {
    return (
      <>
        {this.props.list.length > 0 ? (
          <ul>
            {this.props.list.map((item) => (
              <li key={item.id}>
                <h3>评论人：{item.username}</h3>
                <p>评论内容：{item.content}</p>
                {/* 
                  🔔🔔 Vue 和 React 子传父写法区别
                  Vue:   this.$emit('handleDel', 回传的id)
                  React: this.props.handleDel(回传的id) 
                */}
                <button onClick={() => this.props.handleDel(item.id)}>删除</button>
              </li>
            ))}
          </ul>
        ) : (
          <div>暂无评论</div>
        )}
      </>
    )
  }
}
